<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2022-03-28 11:05:02
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-06 16:43:07
-->
<template>
  <div class="chargePersons">
    <div class="chargePersons-left">
      <div class="company" style="overflow: auto">
        <div class="basics">组织架构</div>
        <el-tree
          :data="data"
          accordion
          :props="defaultProps"
          @node-click="handleNodeClick"
          highlight-current
          style="margin-top: 10px"
        >
          <template slot-scope="{ node, data }">
            <el-tooltip
              effect="dark"
              :content="node.label"
              placement="top-start"
            >
              <div class="tool">
                <span class="comName">
                  {{ node.label }}
                </span>
              </div>
            </el-tooltip>
          </template>
        </el-tree>
      </div>
    </div>
    <div class="chargePersons-right">
      <div class="basics">选择人员</div>
      <el-table
        ref="multipleTable"
        :data="adminData"
        :height="445"
        @selection-change="handleSelectionChange"
        @select="select"
        @select-all="selectAll"
      >
        <template slot="empty" class="emptyBg">
          <img src="@/assets/images/empty.jpg" alt="" />
        </template>
        <el-table-column type="selection"> </el-table-column>
        <el-table-column label="姓名" :show-overflow-tooltip="true" fixed>
          <template slot-scope="scope">
            <span class="admin">
              {{ scope.row.nickName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="手机号"
          prop="phonenumber"
          width="120"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column label="性别" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            {{ scope.row.sex == 0 ? "男" : "女" }}
          </template>
        </el-table-column>
        <el-table-column label="职位" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            {{ scope.row.post != null ? scope.row.post : "-" }}
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        prev-text="上一页"
        next-text="下一页"
        background
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        layout=" ->,total,sizes, prev, pager, next, jumper "
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getTreeselect, getList } from "@/api/sys";
export default {
  props: {
    isMultiple: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      input: "",
      pageNum: 1,
      pageSize: 10,
      total: 0,
      data: [],
      adminData: [],
      selection: [],
      deptId: "",
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  created() {
    this.getTree();
    this.getList();
  },
  methods: {
    select(selection, row) {
      if (selection.length > 1 && this.isMultiple == false) {
        let del_row = selection.shift();
        this.$refs.multipleTable.toggleRowSelection(del_row, this.isMultiple);
      }
    },
    selectAll(selection) {
      if (selection.length > 1 && this.isMultiple == false) {
        selection.length = 1;
      }
    },
        handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList();
    },
    // 获取权限树
    getTree() {
      getTreeselect().then((res) => {
        this.data = res.data;
        if (res.data.length > 0) {
          //'nextTick()' 下次dom更新时触发回调函数
          //默认点击
          this.$nextTick().then(() => {
            const firstNode = document.querySelector(".el-tree-node");
            firstNode.click();
          });
        }
      });
    },
    // 树形结构点击事件
    handleNodeClick(val) {
      this.getList(val.id);
      this.deptId = val.id;
    },
    // 获取人员列表
    getList(id) {
      getList({
        deptId: id,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        identification: this.input,
      }).then((res) => {
        this.adminData = res.rows;
        this.total = res.total;
      });
    },
    handleSelectionChange(val) {
      console.log(val);
      this.selection = val;
      if (val.length !== 0) {
        console.log(val[0].userId);
        this.$parent.$parent.charge = val[0].userId;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.el-table {
  margin-top: 10px;
}
.basics {
  font-size: 14px;
  font-weight: 500;
  position: relative;
  font-size: 14px;
  margin-left: 10px;
}
.basics::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 1px;
  width: 3px;
  height: 14px;
  background: #1267fa;
}
.chargePersons {
  width: 100%;
  height: 540px;
  overflow: auto;
  display: flex;
  .chargePersons-left {
    width: 30%;
    height: 100%;
    .tool {
      display: flex;
      justify-content: space-around;
      .comName {
        width: 100px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .el-button--medium {
        display: none;
        margin-left: 60px;
        border: 0;
      }
    }
  }
  .chargePersons-right {
    width: 70%;
    height: 100%;
  }
}
.el-pagination {
  margin-top: 24px;
  /deep/ .el-pagination__total {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 25px;
  }
  /deep/ .btn-prev {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .btn-next {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-input__inner {
    // width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .more {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-pagination__jump {
    .el-input__inner {
      width: 40px;
      height: 40px;
    }
  }
}
</style>